<template>
  <div class="content">
    <div>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-card :body-style="{ padding: '0px', width: '100%', height: '200px', position: 'relative'}" shadow="always">
            <img src="../../assets/img/index_bg1.png" class="image">
            <div class="bottoms clearfix">
              企业数量
            </div>
            <!-- 企业数量 -->
            <div class="bottom clearfix" @click="showCompanyList(null)">
              {{ no }}
<!--              <el-button type="text" class="button" ></el-button>-->
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{ padding: '0px', width: '100%', height: '200px',position: 'relative' }" shadow="always">
            <img src="../../assets/img/index_bg2.png" class="image">
            <div class="bottoms clearfix">
              重点企业数量
            </div>
            <!-- 企业数量 -->
            <div class="bottom2 clearfix" @click="showCompanyList(2)">
              {{ no2 }}
<!--              <el-button type="text" class="button" @click="showCompanyList(2)">{{ no2 }}</el-button>-->
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{ padding: '0px', width: '100%', height: '200px',position: 'relative' }" shadow="always">
            <!-- <img src="https://huancehuanbao.oss-cn-hangzhou.aliyuncs.com/ep/home/4605.png" class="image"> -->
            <img src="../../assets/img/index_bg3.png" class="image">
            <div class="bottoms clearfix">
              一般企业数量
            </div>
            <!-- 企业数量 -->
            <div class="bottom2 clearfix" @click="showCompanyList(1)">
              {{ no3 }}
<!--              <el-button type="text" class="button" @click="showCompanyList(1)">{{ no3 }}</el-button>-->
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <!-- <el-col :span="8">
          <el-card class="box-card" :body-style="{ padding: '0px', width: '100%', height: '430px','overflow-y': 'auto' }">
            <div slot="header" class="clearfix">
              <span class="spanHeader">法律法规</span>
              <div class="shagnc">
                <el-upload class='oss-upload' ref='upload' action=''
                  :multiple='false'
                  :show-file-list='false'
                  :on-change='handleChange'
                  :auto-upload='false'>
                  <el-button slot='trigger'  type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
              </div>
            </div>

            <div>
              <el-empty v-if="list.length == 0" description="暂无数据"></el-empty>
              <el-table v-else :data="list" style="width: 100%; margin-top: 0px;">
                <el-table-column width='50' align='center' type="index" label="" :index="indexMethod"></el-table-column>
                <el-table-column prop="type" width="310">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="preViewFile(scope.row.files[0])">{{scope.row.files[0].name}} </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="createdDate" width="140"></el-table-column>
              </el-table>
            </div>

          </el-card>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-card class="box-card" :body-style="{ padding: '0px', width: '500px', height: '430px','overflow-y': 'auto' }">
            <div slot="header" class="clearfix">
              <span class="spanHeader">通知公告</span>
              <div class="shagnc">
                <el-upload class='oss-upload' ref='upload' action=''
                  :multiple='false'
                  :show-file-list='false'
                  :on-change='handleChange2'
                  :auto-upload='false'>
                  <el-button slot='trigger'  type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
              </div>
            </div>

            <div>
              <el-empty v-if="list2.length == 0" description="暂无数据"></el-empty>
              <el-table v-else :data="list2" style="width: 100%; margin-top: 0px;">
                <el-table-column width='50' align='center' type="index" label="" :index="indexMethod"></el-table-column>
                <el-table-column prop="type" width="310">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="preViewFile(scope.row.files[0])">{{scope.row.files[0].name}} </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="createdDate" width="140"></el-table-column>
              </el-table>
            </div>

          </el-card>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-card class="box-card" :body-style="{ padding: '0px', width: '500px', height: '430px','overflow-y': 'auto' }">
            <div slot="header" class="clearfix">
              <span class="spanHeader">新闻动态</span>
              <div class="shagnc">
                <el-upload class='oss-upload' ref='upload' action=''
                  :multiple='false'
                  :show-file-list='false'
                  :on-change='handleChange3'
                  :auto-upload='false'>
                  <el-button slot='trigger'  type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
              </div>
            </div>

            <div>
              <el-empty v-if="list3.length == 0" description="暂无数据"></el-empty>
              <el-table v-else :data="list3" style="width: 100%; margin-top: 0px;">
                <el-table-column width='50' align='center' type="index" label="" :index="indexMethod"></el-table-column>
                <el-table-column prop="type" width="310">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="preViewFile(scope.row.files[0])">{{scope.row.files[0].name}} </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="createdDate" width="140"></el-table-column>
              </el-table>
            </div>

          </el-card>
        </el-col> -->

        <el-col :span="16">

          <el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick2">
              <el-tab-pane label="企业" name="1" >

                <div style="width: 1068px; height: '430px'">
                  <el-empty v-if="homeList.length == 0" description="暂无数据"></el-empty>
                  <el-table v-else :data="homeList" style="width: 1068px; margin-top: 0px;" max-height="456">
                    <el-table-column width='50' align='center' type="index" label="序号" :index="indexMethod"></el-table-column>
                    <el-table-column align='center' prop="name" label="企业名称" width="260"></el-table-column>
                    <el-table-column align='center' label="污染物名称及产生量（t/a)">
                      <el-table-column align='center' prop="vocWasteName" label="废气" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.vocWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                      <el-table-column align='center' prop="waterWasteName" label="废水" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.waterWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                      <el-table-column align='center' prop="wasteWasteName" label="危废" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.wasteWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                      <el-table-column align='center' prop="solidWasteName" label="固废" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.solidWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column align='center' prop="outputTotal" label="总量指标（t/a）" width="120"></el-table-column>
                  </el-table>
                </div>
                
              </el-tab-pane>

              <el-tab-pane label="园区" name="2">
                <div style="width: 1068px; height: '430px'">
                  <el-empty v-if="homeList2.length == 0" description="暂无数据"></el-empty>
                  <el-table v-else :data="homeList2" style="width: 1068px; margin-top: 0px;" max-height="456">
                    <el-table-column width='50' align='center' type="index" label="序号" :index="indexMethod"></el-table-column>
                    <el-table-column align='center' prop="name" label="基础设施名称" width="260"></el-table-column>
                    <el-table-column align='center' label="污染物名称及产生量（t/a)">
                      <el-table-column align='center' prop="vocWasteName" label="废气" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.vocWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                      <el-table-column align='center' prop="waterWasteName" label="废水" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.waterWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                      <el-table-column align='center' prop="wasteWasteName" label="危废" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.wasteWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                      <el-table-column align='center' prop="solidWasteName" label="固废" width="159.5">
                        <template slot-scope="scope">
                          <p v-for="(item, index) in scope.row.solidWasteName" :key="index">{{item}} </p>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column align='center' prop="outputTotal" label="总量指标（t/a）" width="120"></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

            </el-tabs>

        </el-col>

        <el-col :span="8">
          
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
              <el-tab-pane name="laws">
                <span slot="label">
                  <div class="shagnc" v-if="activeName === 'laws'">
                    <el-upload class='oss-upload' ref='upload' action=''
                      :multiple='false'
                      :show-file-list='false'
                      :on-change='handleChange2'
                      :auto-upload='false'>
                      <el-button slot='trigger' size="medium" type="text"><i class="el-icon-upload el-icon--right"></i></el-button>
                    </el-upload>
                  </div>
                  法律法规
                </span>
                <div class="yiyiyiyi" style="width: 500px; height: '430px'">
                  <el-empty v-if="list.length == 0" description="暂无数据"></el-empty>
                  <el-table v-else :data="list" style="width: 500px; margin-top: 0px;">
                    <el-table-column width='50' align='center' type="index" label="" :index="indexMethod"></el-table-column>
                    <el-table-column prop="type" width="310">
                        <template slot-scope="scope">
                          <el-link type="primary" @click="preViewFile(scope.row.files[0])">{{scope.row.files[0].name}} </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdDate" width="140"></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane name="notice">
                <span slot="label">
                  <div class="shagnc" v-if="activeName === 'notice'">
                    <el-upload class='oss-upload' ref='upload' action=''
                      :multiple='false'
                      :show-file-list='false'
                      :on-change='handleChange2'
                      :auto-upload='false'>
                      <el-button slot='trigger' size="medium" type="text"><i class="el-icon-upload el-icon--right"></i></el-button>
                    </el-upload>
                  </div>
                  通知公告
                </span>
                <div class="yiyiyiyi" style="width: 500px; height: '430px'">
                  <el-empty v-if="list2.length == 0" description="暂无数据"></el-empty>
                  <el-table v-else :data="list2" style="width: 500px; margin-top: 0px;">
                    <el-table-column width='50' align='center' type="index" label="" :index="indexMethod"></el-table-column>
                    <el-table-column prop="type" width="310">
                        <template slot-scope="scope">
                          <el-link type="primary" @click="preViewFile(scope.row.files[0])">{{scope.row.files[0].name}} </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdDate" width="140"></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane name="news">
                <span slot="label">
                  <div class="shagnc" v-if="activeName === 'news'">
                    <el-upload class='oss-upload' ref='upload' action=''
                      :multiple='false'
                      :show-file-list='false'
                      :on-change='handleChange2'
                      :auto-upload='false'>
                      <el-button slot='trigger' size="medium" type="text"><i class="el-icon-upload el-icon--right"></i></el-button>
                    </el-upload>
                  </div>
                  新闻动态
                </span>
                <div class="yiyiyiyi" style="width: 500px; height: '430px'">
                  <el-empty v-if="list3.length == 0" description="暂无数据"></el-empty>
                  <el-table v-else :data="list23" style="width: 500px; margin-top: 0px;">
                    <el-table-column width='50' align='center' type="index" label="" :index="indexMethod"></el-table-column>
                    <el-table-column prop="type" width="310">
                        <template slot-scope="scope">
                          <el-link type="primary" @click="preViewFile(scope.row.files[0])">{{scope.row.files[0].name}} </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdDate" width="140"></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

            </el-tabs>
          
        </el-col>

      </el-row>

      <el-dialog
        title="预览文件"
        :visible.sync="preViewShow"
        width="70%"
        :before-close="()=>{this.preViewShow=false;}" :show-close="true" :close-on-click-modal="false"
        :close-on-press-escape="true"
        ref="documentPreviewDialog">
        <document-preview :previewInfo.sync="preViewInfo" style="width: 100%;height: 50rem"
                          ref="documentPreview"></document-preview>
      </el-dialog>

      <el-dialog
        title="企业信息"
        :visible.sync="comViewShow"
        width="30%"
        :before-close="()=>{this.comViewShow=false;}" :show-close="true" :close-on-click-modal="false"
        :close-on-press-escape="true"
        ref="companyPreviewDialog">

        <el-empty v-if="companyList.length == 0" description="暂无数据"></el-empty>
        <el-table v-else :data="companyList" style="width: 100%; margin-top: 0px;">
          <el-table-column width='50' align='center' type="index" label="序号" :index="indexMethod"></el-table-column>
          <el-table-column prop="type" width="310" label="企业名称">
              <template slot-scope="scope">
                <el-link type="primary">{{scope.row.name}} </el-link>
              </template>
          </el-table-column>
          <el-table-column prop="createdDate" width="140"  label="创建时间"></el-table-column>
        </el-table>

      </el-dialog>

    </div>
  </div>
</template>
<script>
import DocumentPreview from "@/components/common/DocumentPreview";
export default {
  components: {
    DocumentPreview
  },
  data() {
    return {
      list: [],
      list2: [],
      list3: [],
      homeList: [],
      homeList2: [],

      no: 0,
      no2: 0,
      no3: 0,

      sigData: null,

      preViewShow: false,
      preViewInfo: null,

      comViewShow: false,
      companyList: [],

      activeName: 'laws',

      activeName2: '1',

      qiyea: '../../assets/img/qiyea.jpg'

    };
  },
  created() {
    this.search('laws');
    // this.search('notice');
    // this.search('news');
    this.search2();
    this.getSig();

    this.getCompanyListCount();
  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      this.search(tab.name);
    },
    handleClick2(tab, event) {
      if(tab.name === '1') {
        this.search2();
      }else {
        this.search3();
      }

    },
    preViewFile(row) {
      this.preViewShow = true;
      this.preViewInfo = row;
    },
    search(type) {
      this.$get('/basic-copywriting/pageList', {
        type: type,
        size: 100
      })
        .then((result) => {
          if (result.code == 200 && result.data) {
            if(type == 'laws') {
              this.list = result.data.records;
            }else if(type == 'notice') {
              this.list2 = result.data.records;
            }else if(type == 'news') {
              this.list3 = result.data.records;
            }

          }
        })
        .catch((error) => {
          //异常暂定为空
        });
    },
    search2() {
      this.$get('/biz-pollution-source/wasteHomeList', {})
        .then((result) => {
          if (result.code == 200 && result.data) {
              this.homeList = result.data;
          }else {
            this.homeList = [];
          }
        })
        .catch((error) => {
          //异常暂定为空
        });
    },
    search3() {
      this.$get('/biz-pollution-source/wasteHomeList2', {})
        .then((result) => {
          if (result.code == 200 && result.data) {
              this.homeList2 = result.data;
          }else {
            this.homeList2 = [];
          }
        })
        .catch((error) => {
          //异常暂定为空
        });
    },
    handleChange(file, fileList) {
      const isLt2M = file.raw.size / 1024 / 1024 < 500;
      if (!isLt2M) {
        this.$message.error('单个文件大小不能超过 500MB!');
        return;
      }
      this.submit('laws', fileList);
    },
    handleChange2(file, fileList) {
      const isLt2M = file.raw.size / 1024 / 1024 < 500;
      if (!isLt2M) {
        this.$message.error('单个文件大小不能超过 500MB!');
        return;
      }
      this.submit('notice', fileList);
    },
    handleChange3(file, fileList) {
      const isLt2M = file.raw.size / 1024 / 1024 < 500;
      if (!isLt2M) {
        this.$message.error('单个文件大小不能超过 500MB!');
        return;
      }
      this.submit('news', fileList);
    },
    submit(type, fileList) {
      this.$WLoading();
      let param = {
        type: type,
        files: [],
      };
      param.files = this.submitUpload(fileList);

      this.$postJson("/basic-copywriting/create", param)
        .then((result) => {
          if (result.code == 200) {
            this.$message.success(result.msg);

            //关闭弹框并刷新列表
            this.search(type);
          } else this.$message.error(result.msg);
          this.$cancelLoading();
        })
        .catch((error) => {
          //添加用户异常
          this.$message.error("添加失败");
          this.$cancelLoading();
        });
    },
    showCompanyList(type) {
      this.comViewShow = true;
      this.$get('/biz-company/list', {
        type: type
      })
      .then((result) => {
        if (result.code == 200 && result.data) {
          this.companyList = result.data;
        }
      })
      .catch((error) => {
        this.companyList = [];
      });
    },
    getCompanyListCount() {
      this.$get('/biz-company/countList')
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.countList = result.data;
            result.data.forEach(it => {
              if(it.label == '企业数量') this.no = it.no
              else if(it.label == '重点企业数量') this.no2 = it.no
              else if(it.label == '一般数量') this.no3 = it.no
            })
          }
        })
        .catch((error) => {
          this.countList = null;
        });
    },
    getSig() {
      this.$get('/oss/getUploadOssSignature')
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.sigData = result.data;
          }
        })
        .catch((error) => {
          this.sigData = null;
        });
    },
    submitUpload(allAttr) {

      let sigData = this.sigData;//提前请求拿到的签名信息

      let nowAllAttr = [];
      if(!allAttr || allAttr.length == 0)
        return nowAllAttr;

      allAttr.forEach(element => {
        let ossData = new FormData()//创建oss数据对象
        ossData.append('name', element.name)
        let keyValue = 'ep/web/' + this.uuid() + '::' + element.name
        ossData.append('key', keyValue)
        ossData.append('policy', sigData.policy)
        ossData.append('OSSAccessKeyId', sigData.accessId)
        ossData.append('success_action_status', 200)
        ossData.append('Signature', sigData.signature)
        ossData.append('file', element.raw)
        this.$postFormData(sigData.ossDomain, ossData)
          .then((result) => {})
          .catch((error) => {});

        nowAllAttr.push({
          name: element.name,
          url: sigData.ossDomain +'/'+ keyValue,
          size: element.size,
        })
      });

      return nowAllAttr;
    },

  }


};
</script>
<style lang='scss' scoped>
.image{
  width: 100%;
  height: 100%;
}

// .el-tabs--card {
//   height: calc(70vh - 10px);
//   padding: 0px;
// }
.el-tab-pane {
  height: calc(50vh - 10px);
  overflow-y: auto;
}

.el-row {
  margin-bottom: 20px;
}
.shagnc{
  float: right;
  padding: 3px 0;
}
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    //margin-top: 13px;
    //line-height: 12px;
    position: absolute;
    top: 56%;
    left: 12%;
    font-size: 3rem;
    color: white;
    cursor: pointer;
  }
  .bottom2 {
    //margin-top: 13px;
    //line-height: 12px;
    position: absolute;
    top: 56%;
    left: 12%;
    font-size: 3rem;
    color: white;
    cursor: pointer;
  }
  .bottoms {
    //margin-top: 13px;
    //line-height: 12px;
    position: absolute;
    top: 18%;
    left: 8%;
    font-size: 2.5rem;
    color: white;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

  .spanHeader{
    font-size: 24px;
  }



</style>
